<template>
<div id="">
  <el-form ref="activity" :model="formData" class="full-width-input pr20" :rules="rules" label-width="108px" :size="defaultFormItemSize" :disabled="formStatus  == 'show' ? true : false">
    <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
      <el-col :span="24">
        <el-form-item label="活动名称" prop="activityName" :rules="$commonRules({ rule: 'required', msg: '请输入活动名称'})">
          <el-input class="input-item" v-model="formData.activityName" :clearable="true" placeholder="请输入活动名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务类别" prop="serveCategory" :rules="$commonRules({ rule: 'required', msg: '请选择服务类别', trigger:'change' })">
          <el-select class="input-item" v-model="formData.serveCategory" :clearable="true" filterable placeholder="请选择服务类别">
            <el-option v-for="item in initData.serveCategory.dropdownList" :key="item.id" :value="item.id" :label="item.name" :disabled="item.disabled">
              <el-row type="flex" justify="space-between" align="middle">
                <span>{{item.name}}</span>
                <el-tag v-if="item.disabled" size="mini" type="info" style="margin-left: 20px;">已禁用</el-tag>
              </el-row>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属品牌项目" prop="projectId">
          <el-select class="input-item" v-model="formData.projectId" :clearable="true" filterable placeholder="请选择所属品牌项目">
            <el-option v-for="item in initData.projectId.dropdownList" :key="item.id" :value="item.id" :label="item.projectName" :disabled="item.disabled">
              <el-row type="flex" justify="space-between" align="middle">
                <span>{{item.projectName}}</span>
                <el-tag v-if="item.disabled" size="mini" type="info" style="margin-left: 20px;">已禁用</el-tag>
              </el-row>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务对象" prop="serveTarget" :rules="$commonRules({ rule: 'required', msg: '请选择服务对象', trigger:'change' })">
          <el-select class="input-item" v-model="formData.serveTarget" :clearable="true" filterable placeholder="服务对象">
            <el-option v-for="item in initData.serveTarget.dropdownList" :key="item.id" :value="item.id" :label="item.name" :disabled="item.disabled">
              <el-row type="flex" justify="space-between" align="middle">
                <span>{{item.name}}</span>
                <el-tag v-if="item.disabled" size="mini" type="info" style="margin-left: 20px;">已禁用</el-tag>
              </el-row>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="活动时间" prop="date" :rules="$commonRules({ rule: 'required', msg: '请选择活动时间', trigger:'change' })">
          <el-date-picker v-model="formData.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="活动地址" prop="area" :rules="$commonRules({ rule: 'required', msg: '请选择活动地址', trigger:'change' })">
          <el-input placeholder="详细地址" v-model="formData.address" class="input-with-select">
            <el-cascader v-model="formData.area" :options="initData.area.areaOptions" clearable :props="areaProps" slot="prepend" placeholder="请选择" filterable style="width:200px"></el-cascader>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="负责人" prop="director">
          <el-input class="input-item" v-model="formData.director" :clearable="true" placeholder="负责人" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="" prop="directorPublic" label-width="0">
          <el-radio v-model="formData.directorPublic" label="1">公开</el-radio>
          <el-radio v-model="formData.directorPublic" label="0">不公开</el-radio>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="负责人电话" prop="directorPhone">
          <el-input class="input-item" v-model="formData.directorPhone" :clearable="true" placeholder="负责人电话" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="" prop="directorPhonePublic" label-width="0">
          <el-radio v-model="formData.directorPhonePublic" label="1">公开</el-radio>
          <el-radio v-model="formData.directorPhonePublic" label="0">不公开</el-radio>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="联系人" prop="contacts">
          <el-input class="input-item" v-model="formData.contacts" :clearable="true" placeholder="联系人" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="" prop="contactsPublic" label-width="0">
          <el-radio v-model="formData.contactsPublic" label="1">公开</el-radio>
          <el-radio v-model="formData.contactsPublic" label="0">不公开</el-radio>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="联系人电话" prop="contactsPhone">
          <el-input class="input-item" v-model="formData.contactsPhone" :clearable="true" placeholder="联系人电话" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="" prop="contactsPhonePublic" label-width="0">
          <el-radio v-model="formData.contactsPhonePublic" label="1">公开</el-radio>
          <el-radio v-model="formData.contactsPhonePublic" label="0">不公开</el-radio>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="活动封面" prop="coverImage">
          <el-upload class="upload-image-item upload-image-multi" name="uploadFile" :headers="getUploadHeaders" :action="getUploadActionUrl('/admin/upms/file/upload')" :data="{ asImage: true}" multiple :on-success="onPictureUrlUploadSuccess"
            :on-remove="onPictureUrlRemoveFile" :before-upload="pictureFile" list-type="picture-card" :file-list="uploadWidgetImpl.fileList" :show-file-list="true" :on-preview="handlePreview">
            <i class="el-icon-plus upload-image-item"></i>
            <div slot="tip" class="el-upload__tip" style="textAlign:left">请上传清晰度较高的图片</div>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="活动介绍" prop="content" :rules="$commonRules({ rule: 'required', msg: '请输入活动内容'})">
          <rich-editor-new :value.sync="formData.content" :readOnly="formStatus == 'show'"></rich-editor-new>
          <!-- <el-input class="input-item" v-model="formData.content" :clearable="true" placeholder="阵地介绍" type="textarea" :rows="2" /> -->
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</div>
</template>
<script>
import {
  UploadWidget
} from '@/utils/widget.js';
import {
  uploadMixin
} from '@/core/mixins';
import {
  api as viewerApi
} from 'v-viewer';
import projectConfig from '@/core/config';
export default {
  name: "",
  mixins: [uploadMixin],
  props: {
    initData: {
      type: Object,
      default: () => {
        return {
          serveCategory: {},
          projectId: {},
          serveTarget: {},
          area: {}
        }
      }
    },
    formStatus: {
      tyoe: String,
      default: "add"
    },
    initForm: {
      tyoe: Object,
      default: {}
    }
  },
  data() {
    return {
      formData: {},
      rules: {},
      areaProps: {
        value: 'code',
        label: 'name'
      },
      uploadWidgetImpl: new UploadWidget(10),
      dialogVisible: false,
      dialogImageUrl: ""
    }
  },
  mounted() {
    if (Object.values(this.initForm).length > 0) {
      this.initFormContent()
    }
  },
  methods: {
    initFormContent() {
      let me = this;
      me.$set(me, "formData", me.initForm);
      if (me.formData?.coverImage?.length > 0) {
        let arr = [];
        me.formData.coverImage.forEach((item, i) => {
          me.uploadWidgetImpl.fileList.push({
            filename: item,
            url: projectConfig.baseUrl + 'admin/upms/file/download?filename=' + item
          })
        });
      }
      me.$set(me.formData, "area", [me.formData.province, me.formData.city, me.formData.district, me.formData.street]);
      me.$set(me.formData, "date", [me.formData.startDate, me.formData.endDate])
    },
    getFormData() {
      let flag = true;
      this.$refs.activity.validate((valid) => {
        flag = valid ? true : false
      })
      return flag ? this.formData : {}
    },
    onPictureUrlUploadSuccess(response, file, fileList) {
      if (response.success) {
        file.downloadUri = response.data.downloadUri;
        file.filename = response.data.filename;
        file.url = URL.createObjectURL(file.raw);
        this.uploadWidgetImpl.onFileChange(file, fileList);
        this.formData.coverImage = this.uploadWidgetImpl.fileList.map(x => x.filename)
        this.fileListToJson(this.uploadWidgetImpl.fileList);
      } else {
        this.$message.error(response.message);
      }
    },
    /**
     * 移除课程图片
     */
    onPictureUrlRemoveFile(file, fileList) {
      this.uploadWidgetImpl.onFileChange(file, fileList);
      this.formData.coverImage = this.uploadWidgetImpl.fileList.map(x => x.filename)
    },
    handlePreview(val) {
      let arr = this.formData.coverImage.map(x => {
        return projectConfig.baseUrl + 'admin/upms/file/download?filename=' + x + '&type=1'
      });
      const $viewer = viewerApi({
        images: arr
      })
    },
  }
}
</script>
<style lang="scss" scoped>
</style>
